<script setup>
import { reactive, toRefs } from 'vue'
const user = reactive({ name: 'tom', age: 30 })
console.log('---user---', user)

// toRefs可以让解构出来的值也有响应式
const { name, age } = toRefs(user)
console.log('---name---', name, age)

const change = () => {
  user.name = 'jack'
  user.age = 100
}
</script>

<template>
  <div class="">
    name is {{ name }} age is {{ age }}
    <p>
      <button @click="change">change</button>
    </p>
  </div>
</template>

<style scoped></style>
